<script setup lang="ts">
import { useUserInfoStore } from '@/stores/modules/user'
import type { LoginData } from '@/types/user'
import type { FormInstance, FormRules } from 'element-plus'

import { onBeforeUnmount, onMounted, reactive, ref } from 'vue'
import router from '@/router'

// 数据绑定对象
const loginData = reactive<LoginData>({
  username: 'admin',
  password: 'admin123'
})

// 验证规则
const rules = reactive<FormRules>({
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
})

// 登录动作处理
// 定义表单校验实例 -> 会去自动匹配 template 中 ref="ruleFormRef" 指定的表单元素，拿到指定的对象
const ruleFormRef = ref<FormInstance>()
// 获取用户信息缓存仓库
const userInfo = useUserInfoStore()

// 加载动画
const loading = ref(false)

const handleLogin = async () => {
  // 表单验证
  const valid = await ruleFormRef.value?.validate()
  // 校验不成功直接 return
  if (!valid) {
    return false
  }
  // 校验成功进行后续操作
  // 1.加载 loading
  loading.value = true
  // 2.登录请求 获取token
  userInfo
    .login(loginData)
    .then(() => {
      // 跳转
      router.push('/')
    })
    .catch(() => {
      // 验证失败，重新加载验证码
    })
    .finally(() => {
      // 验证结束，隐藏loading
      loading.value = false
    })
}

// 监听回车事件
const onKeyUp = (e: any) => {
  if (e.key == 'Enter') {
    handleLogin()
  }
}
// 添加键盘监听
onMounted(() => {
  document.addEventListener('keyup', onKeyUp)
})
// 移除键盘监听
onBeforeUnmount(() => {
  document.removeEventListener('keyup', onKeyUp)
})
</script>
<template>
  <el-row class="login-container">
    <el-col :span="16" class="left">
      <div>
        <div>CSYBLOG</div>
        <div>后台管理系统</div>
      </div>
    </el-col>
    <el-col :span="8" class="right">
      <h2 class="title">欢迎登录</h2>
      <div>
        <span class="line"></span>
        <span>账号密码登录</span>
        <span class="line"></span>
      </div>
      <el-form ref="ruleFormRef" :rules="rules" :model="loginData">
        <el-form-item prop="username">
          <el-input v-model="loginData.username" placeholder="请输入用户名">
            <template #prefix>
              <el-icon>
                <user />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginData.password" placeholder="请输入密码" show-password>
            <template #prefix>
              <el-icon>
                <lock />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="login-button" round color="#0a12b1" @click="handleLogin" :loading="loading">
            登 录
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.login-container {
  @apply min-h-screen bg-indigo-500;
}
.login-container .left,
.login-container .right {
  @apply flex items-center justify-center;
}

.login-container .right {
  @apply bg-white flex-col;
}
.left > div > div:first-child {
  @apply font-bold text-5xl text-white mb-4;
}
.left > div > div:last-child {
  @apply text-gray-200 text-2xl;
}

.right .title {
  @apply font-bold text-3xl text-gray-800;
}

.right > div {
  @apply flex items-center justify-center my-5 text-gray-300 space-x-2;
}

.right .line {
  @apply h-[1px] w-16 bg-gray-300;
}
.right > el-form {
  @apply w-[250px];
}
.login-button {
  @apply w-[250px] bg-indigo-500;
}
</style>
